<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    let router = useRouter();

    let data = reactive({
      tagname: "all",
      toplist: [
        { id: 1, text: "精选", type: "all", flag: true },
        { id: 2, text: "男生", type: "man", flag: true },
        { id: 3, text: "女生", type: "girl", flag: true },
        // { id: 4, text: "听书", type: "hear", flag: true }
      ],
    });

    // 跳转Search
    let searchFun = () => {
      console.log(router);
      data.isShow = false;
      router.push("/search");
    };

    let sifyFun = (type) =>{
      if(type == 'man' || type == 'girl' ){
        router.push("/classify");
      }else{
        return 0
      }
    }

    return {
      searchFun,
      sifyFun,
      data,
    };
  },
};
</script>


<template>
  <div class="topnav">
    <div class="container">
      <div class="toptitle">

        <!-- 顶部导航栏文字选项 -->
        <ul class="toplist">
          <li
          
            v-for="item in data.toplist"
            :key="item.id"
            @click="sifyFun(item.type)"
            :class="['topitem', data.tagname == item.type ? 'big' : '']"
            v-show="item.flag"
          >
            {{item.text}}
        </li>
        </ul>

        <!-- 搜索框 -->
        <div class="search" @click="searchFun">
          <!-- 预计此处加轮播效果 -->
          <p>天上地下为我独尊</p>
        </div>
        <!-- 预计此处加动画效果 -->
        <div class="setall">
          <span></span>
          <span></span>
          <span></span>
        </div>

      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topnav {
  width: 100%;
  box-shadow: 0px 0px 4px rgba(204, 204, 204, 0.5);
  background-color: rgb(255, 255, 255);
  .container {
    padding: 0 16px;
    .toptitle {
      height: 40px;
      line-height: 40px;
      display: flex;
      align-items: center;
      .toplist {
        display: flex;
        height: 40px;
        line-height: 40px;
        .topitem {
          font-size: 14px;
          margin-right: 16px;
        }
        .big {
          font-size: 18px;
          font-weight: 600;
        }
      }
      .search {
        flex: 1;
        text-indent: 14px;
        height: 30px;
        line-height: 30px;
        background: #ececec;
        border-radius: 20px;
        p {
          box-sizing: border-box;
          width: 132px;
          font-size: 12px;
          padding: 0px 18px;
          color: #9b9b9b;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .setall {
        height: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        margin-left: 10px;
        span {
          width: 16px;
          height: 3px;
          display: block;
          background-color: rgba(51, 51, 51, 0.5);
          &:nth-child(2) {
            width: 12px;
          }
        }
      }
    }
  }
}
</style>
